import {
  Box,
  // chakra,
  Container,
  // Link,
  Stack,
  Text,
  // VisuallyHidden,
  // Image,
} from '@chakra-ui/react';
// import {
//   IconBrandInstagram,
//   IconBrandTwitter,
//   IconBrandYoutube,
// } from '@tabler/icons-react';
// import { ReactNode } from 'react';
// import logo from '@/assets/images/aigctour.jpg';

// const Logo = (props: any) => {
//   return <Image alt="TOURFLY" src={logo} />;
// };

// const SocialButton = ({
//   children,
//   label,
//   href,
// }: {
//   children: ReactNode;
//   label: string;
//   href: string;
// }) => {
//   return (
//     <chakra.button
//       bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
//       rounded={'full'}
//       w={8}
//       h={8}
//       cursor={'pointer'}
//       as={'a'}
//       href={href}
//       display={'inline-flex'}
//       alignItems={'center'}
//       justifyContent={'center'}
//       transition={'background 0.3s ease'}
//       _hover={{
//         bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
//       }}
//     >
//       <VisuallyHidden>{label}</VisuallyHidden>
//       {children}
//     </chakra.button>
//   );
// };

export default function SmallCentered() {
  return (
    <Box color="base.300">
      <Container
        as={Stack}
        maxW="6xl"
        py={4}
        spacing={4}
        justify="center"
        align="center"
      >
        {/* <Logo /> */}
        {/* <Stack direction={'row'} spacing={6}>
          <Link href={'/aigc'}>AIGC</Link>
        </Stack> */}
      </Container>

      {/* <Box
        borderTopWidth={1}
        borderStyle={'solid'}
        borderColor={useColorModeValue('gray.200', 'gray.700')}
      > */}
      <Container
        as={Stack}
        maxW="6xl"
        py={4}
        direction={{ base: 'column', md: 'row' }}
        spacing={4}
        justify={{ base: 'center', md: 'center' }}
        align={{ base: 'center', md: 'center' }}
      >
        <Text>© 2023 TOURFLY</Text>
        {/* <Stack direction={'row'} spacing={6}>
            <SocialButton label={'Twitter'} href={'#'}>
              <IconBrandTwitter />
            </SocialButton>
            <SocialButton label={'YouTube'} href={'#'}>
              <IconBrandYoutube />
            </SocialButton>
            <SocialButton label={'Instagram'} href={'#'}>
              <IconBrandInstagram />
            </SocialButton>
          </Stack> */}
      </Container>
      {/* </Box> */}
    </Box>
  );
}
